<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery-1.12.2.js"></script>
    <script src="js/animate.js"></script>
    <script src="js/my.js"></script>


    <!-- 使用学过的jquery或者原生js完成轮播图

要求：

1）.使用jQuery来做或者有原生js都可以

2) . 轮播图能自动播放

3) . 轮播图能点击左右按钮播放

4) . 轮播图图片播放有淡入淡出效果

5) . 左右按钮可以暂时不用和底部小方块对应播放
(62分) -->
</head>
<body>
    <div id="container">
        <ul>
            <li class="cur"><a href="#"><img src="images/1.jpg" alt="" width="992px" height="420px"></a></li>
            <li><a href="#"><img src="images/2.jpg" alt="" width="992px" height="420px"></a></li>
            <li><a href="#"><img src="images/3.jpg" alt="" width="992px" height="420px"></a></li>
            <li><a href="#"><img src="images/4.jpg" alt="" width="992px" height="420px"></a></li>
            <li><a href="#"><img src="images/5.jpg" alt="" width="992px" height="420px"></a></li>
        </ul>
        <div id="arr">
            <a href="javascript:;" id="arrLeft"></a>
            <a href="javascript:;" id="arrRight"></a>
        </div>
        <ol id="ol"></ol>

        <script>
            // 事件1,通过图片动态为ol创建盒子,并且为每个li注册点击事件,让对应的图片显示
            // 1 获取ol这个大盒子
            var ol = document.getElementById('ol');
            var container = document.getElementById('container');
            var lis = container.getElementsByTagName('li');
            // console.log(lis.length);
            for(var i = 0; i < 5; i++) {
                var li = document.createElement('li');
                li.innerText = i + 1;
                ol.appendChild(li);
            }
            // 事件2,鼠标移入,箭头盒子出现;鼠标移除,箭头盒子消失

            // 事件4,页面加载完,图片就开始做动画

        </script>
         <script>
        $(function () {
            $('ol>li').click(function () {
                var index = $(this).index();
                $('#container>li').css('display', 'none');
                console.log($('#container>li:eq(' + index + ')'));
                $('#container>li:eq(' + index + ')').css('display', 'block');
            });
            // 事件2,鼠标移入,箭头盒子出现;鼠标移除,箭头盒子消失
            $('#container').mouseover(function () {
                $('#arr').css('opacity',1);
            });
            $('#container').mouseout(function () {
                $('#arr').css('opacity',0);
            })
        })
    </script>
    </div>
</body>
</html>